html,
body {
    height: 100%;
}

body {
    padding: 45px 0 55px 0;
    background-color: #fff;
}

img {
    display: block;
    width: 100%;
}

// 正在等待
.wait {
    // 铺满整个屏幕的蒙版
    &::before {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 100;
        background-color: #ccc;
        opacity: .6;
        top: 0;
        left: 0;
        content: "";
    } // 旋转的小图标
    &::after {
        animation: fa-spin 1s infinite steps(8);
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        position: fixed;
        z-index: 101;
        font-size: 50px;
        top: 30%;
        left: 50%;
        content: "\f110";
        margin-left: -25px;
        color: #0094ff;
    }
}

#header {
    position: fixed;
    width: 100%;
    height: 45px;
    background-color: #0094ff;
    h1 {
        color: #fff;
    }
    .h_left {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
        color: #fff;
        font-size: 20px;
    }
    .h_right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        color: #fff;
        font-size: 20px;
    }
}

.footer {
    position: fixed;
    width: 100%;
    height: 55px;
    background-color: #0094ff;
    bottom: 0;
    left: 0;
    display: flex;
    a {
        flex: 1;
        color: #fff;
        text-align: center;
        padding-top: 8px;
        p {
            color: #fff;
        }
    }
    .active {
        color: orange;
        p {
            color: orange;
        }
    }
}